<template>
	
	<view class="business-box" v-if="shopInfo.shopid" 
		@click="jumpShopDetail"
	>
		<view class="shop  text-grey" >
			<view class="shop-img" v-if="shopInfo.shopimg">
				<image class="img" :src="shopInfo.shopimg"></image>
			</view>
			<view class="shop-img" v-else>
				<image class="img" src="/static/img/logo.png"></image>
			</view>
			<view class="shop-info">
				<view class="title  text-cut">{{shopInfo.shopname}}</view>
				<view class="main-hd">
					
					<star-group :score="shopInfo.shoprate" :maxScore="5"></star-group>
					<view class="comment margin-left-xs">{{shopInfo.momentnum}}条评论</view>
					<view class="margin-left-xs">￥{{shopInfo.mintax}}/人均</view>
				</view>
				
				<view class="address">
					{{shopInfo.shopadress}} | {{shopInfo.distance}}km
				</view>
				
				<view class="tag-group text-cut" v-if="shopInfo.tag && shopInfo.tag.length">
					<block v-for="(tag, index) of shopInfo.tag" :key="index">
						<view class='cu-tag line-gray radius sm'>{{tag}}</view>
					</block>
				</view>
				
			</view>
		</view>
		
		<view class="game-list"  v-if="shopInfo.game && shopInfo.game.length">
			<block v-for="(game, index) of shopInfo.game" :key="index">
				<view class="game-item">
					<text class="margin-right-xs">{{game.gamename}}</text>
					<text class="margin-right-xs">{{gdate.formatTime(game.startdate)}}</text>
					<text class="text-orange">￥{{game.gameprice}}</text> /人
					<text class="margin-left-xs">已报名{{game.addnum}}人</text>
				</view>
			</block>
		</view>
	</view>
</template>
<script module="gdate" lang="wxs">
	function formatTime (startdate) {
		
		var Yy = startdate.substring(0,4) + '-'
		var Mm = startdate.substring(4,6) + '-'
		var Dd = startdate.substring(6)
		return Yy + Mm + Dd
	}
    module.exports = {
		formatTime: formatTime
    }
</script>
<script>
import starGroup from '@/components/basics/star-group.vue';
export default {
	name: 'ViewBusiness',
	components: {
		starGroup
	},
	props: {
		shopInfo: {
			type: Object,
			default: () => {
				return {}
			}
		}
	},
	methods: {
		jumpShopDetail() {
			this.$jumpPages('shopinfo',{
				shopid: this.shopInfo.shopid
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.business-box{
	background-color: #FFFFFF;
	border-radius: 16rpx; 
	margin: 30rpx;
	box-shadow: 1px 1px 10px #EEEEEE;
	.shop{
		padding: 24rpx;
		position: relative;
		.shop-img{
			position: absolute;
			width: 100rpx;
			height: 100rpx;
			left: 24rpx;
			top: 24rpx;
			.img{
				width: 100rpx;
				height: 100rpx;
				border-radius: 10rpx; 
			}
		}
		.shop-info{
			min-height: 128rpx;;
			display: flex;
			flex-direction: column;
			overflow: hidden;
			position: relative;
			margin-left: 100rpx;
			padding-left: 15px;
			font-size: 14px;
			line-height: 1;
			.orange{
				color: #FE6B42;
			}
		}
		.main-hd{
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			font-size: 24rpx;
			color: #666666;
			.num{
				letter-spacing: 1px;
			}
		}
		.title{
			font-size: 32rpx;
			font-weight: 700;
			color: #000000;
			margin-bottom: 20rpx;
		}
		.address{
			font-size: 24rpx;
			font-weight: 400;
			color: #666666;
			line-height: 1.4;
		}
		.tag-group{
			margin-top: 20rpx;
			height: 50rpx;
			.cu-tag{
				padding: 0 12rpx;
				height: 40rpx;
			}
		}
		
	}
	
	.game-list{
		position: relative;
		padding: 16rpx 24rpx;
		font-size: 24rpx;
		&::after{
			content: '';
			position: absolute;
			left: 0;
			right: 0;
			height: 1rpx;
			background-color: #F3F3F3;
			top: 0;
		}
		.game-item{
			display: flex;
			align-items: center;
			&::before{
				content: '';
				display: inline-block;
				width: 8rpx;
				height: 24rpx;
				border-radius: 8rpx;
				background-color: #1CBBB4;
				margin-right: 10rpx;
			}
		}
		
	}
}		
</style>
